css 画像 4つ 横並び 2列

CSS背景画像：4枚画像を水平2列に配置する方法

この記事では、CSSの`background-repeat`プロパティとその他の背景プロパティを組み合わせて、4枚の画像を2行2列のグリッド形式で背景にタイル状に配置する方法を詳しく解説します。

一、CSS `background-repeat` プロパティの基本

CSSの`background-repeat`プロパティは、背景画像をどのように繰り返すかを指定します。主な値は以下の通りです。

値 説明
repeat デフォルト値。画像は水平方向と垂直方向の両方に繰り返されます。
repeat-x 画像は水平方向にのみ繰り返されます。
repeat-y 画像は垂直方向にのみ繰り返されます。
no-repeat 画像は繰り返されません。
space 画像は繰り返されますが、使用可能なスペースに均等に分布され、トリミングは行われません。
round 画像は繰り返され、必要に応じて画像が拡大縮小されて、画像の一部が表示されないようにします。

二、「4枚の画像を水平2列に配置する」ための鍵： `background-image`, `background-position`, `background-size`

4枚の画像を2行2列のグリッド形式で配置するには、以下の3つのプロパティを組み合わせます。

  1. background-image

    カンマ区切りで、タイル状に配置する4つの画像を定義します。 例：

    background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg"), url("image4.jpg");

  2. background-position

    2x2のグリッドレイアウトを実現するために、各画像の位置を正確に設定します。 例：

    background-position: 0% 0%, 50% 0%, 0% 50%, 50% 50%;

  3. background-size

    各画像のサイズを制御します。レイアウトに合わせて調整します。例えば、画像をコンテナの幅の半分に設定し、高さは自動調整します。

    background-size: 50% auto;

三、完全なコード例

.container {
  width: 800px;
  height: 600px;
  background-image: url("image1.jpg"), url("image2.jpg"), url("image3.jpg"), url("image4.jpg");
  background-position: 0% 0%, 50% 0%, 0% 50%, 50% 50%;
  background-size: 50% auto;
  background-repeat: no-repeat; /* 画像が繰り返されないようにする */
}

四、その他のテクニック

  • 画像の位置とサイズを正確に制御するには、パーセンテージまたはピクセル値を使用できます。
  • background-attachment プロパティを使用して、背景画像をスクロールするかどうかを制御できます。
  • background-origin および background-clip プロパティを使用して、背景画像の描画領域を制御できます。

上記のステップに従うことで、CSSを使用して4枚の画像を2行2列のグリッド形式で背景にタイル状に配置することができます。

質問と回答

  1. Q: 画像の順番を変更するにはどうすればよいですか？

    A: background-image と background-position の値の順番を対応させて変更してください。

  2. Q: レスポンシブデザインに対応するにはどうすればよいですか？

    A: メディアクエリを使用して、画面サイズに応じて background-size や background-position の値を変更します。

  3. Q: 画像間の隙間を調整するにはどうすればよいですか？

    A: 背景画像自体に隙間を含めるか、親要素にパディングを設定して調整します。

その他の参考記事:ul li 横並び 2 列